<script setup>
import { ref } from 'vue'

const projectForm = ref({
  name: '',
  description: '',
  type: '',
  manager: '',
  teamMembers: [],
  startDate: '',
  endDate: '',
  budget: '',
  milestones: '',
  priority: '',
  status: ''
})

const createProject = () => {
  console.log(projectForm.value)
}

const cancelProject = () => {
  projectForm.value = {
    name: '',
    description: '',
    type: '',
    manager: '',
    teamMembers: [],
    startDate: '',
    endDate: '',
    budget: '',
    milestones: '',
    priority: '',
    status: ''
  }
}
</script>

<template>
    <div class="total">
        <el-row :gutter="20">
            <el-col :span="24">
                <el-tag type="primary" style="font-size: 16px; letter-spacing: 2px; padding: 8px 12px; margin-bottom: 20px;">
                    创建项目
                </el-tag>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <!-- 创建项目卡片 -->
                <el-card class="create-project-card">
                    <template #header>
                        <div class="clearfix">
                            <span>创建新项目</span>
                        </div>
                     </template>
                    <el-form :model="projectForm" label-width="120px">
                        <el-form-item label="项目名称" required>
                            <el-input v-model="projectForm.name" placeholder="请输入项目名称"></el-input>
                        </el-form-item>
                        <el-form-item label="项目描述" required>
                            <el-input type="textarea" v-model="projectForm.description" placeholder="请输入项目描述"></el-input>
                        </el-form-item>
                        <el-form-item label="项目类型" required>
                            <el-select v-model="projectForm.type" placeholder="请选择项目类型">
                                <el-option label="软件开发" value="软件开发"></el-option>
                                <el-option label="市场营销" value="市场营销"></el-option>
                                <el-option label="工程建设" value="工程建设"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="项目负责人" required>
                            <el-input v-model="projectForm.manager" placeholder="请输入项目负责人"></el-input>
                        </el-form-item>
                        <el-form-item label="项目团队成员" required>
                            <el-select v-model="projectForm.teamMembers" multiple placeholder="请选择项目团队成员">
                                <el-option label="成员A" value="成员A"></el-option>
                                <el-option label="成员B" value="成员B"></el-option>
                                <el-option label="成员C" value="成员C"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="项目时间范围" required>
                            <el-date-picker
                                v-model="projectForm.startDate"
                                type="date"
                                placeholder="选择开始日期"
                                style="width: 48%; margin-right: 4%;"
                            ></el-date-picker>
                            <el-date-picker
                                v-model="projectForm.endDate"
                                type="date"
                                placeholder="选择结束日期"
                                style="width: 48%;"
                            ></el-date-picker>
                        </el-form-item>
                        <el-form-item label="项目预算" required>
                            <el-input v-model="projectForm.budget" placeholder="请输入项目预算"></el-input>
                        </el-form-item>
                        <el-form-item label="项目里程碑" required>
                            <el-input type="textarea" v-model="projectForm.milestones" placeholder="请输入项目里程碑"></el-input>
                        </el-form-item>
                        <el-form-item label="项目优先级" required>
                            <el-select v-model="projectForm.priority" placeholder="请选择项目优先级">
                                <el-option label="高" value="高"></el-option>
                                <el-option label="中" value="中"></el-option>
                                <el-option label="低" value="低"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="项目状态" required>
                            <el-select v-model="projectForm.status" placeholder="请选择项目状态">
                                <el-option label="未开始" value="未开始"></el-option>
                                <el-option label="进行中" value="进行中"></el-option>
                                <el-option label="已完成" value="已完成"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="createProject">保存并提交</el-button>
                            <el-button @click="cancelProject">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<style lang="scss" scoped>
.total {
    padding: 20px;
}

.create-project-card {
    margin-bottom: 20px;
    .el-form-item {
        margin-bottom: 22px;
    }
    .el-input, .el-select, .el-date-picker {
        width: 100%;
    }
    .el-textarea {
        width: 100%;
    }
    .el-button {
        margin-right: 10px;
    }
}
</style>